<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>系统配置</title>
    <% include("../../common/css.html"){} %>
    <link rel="stylesheet" href="${ctxPath}/assets/jsonview/jquery.jsonview.css">
    <style>
        .jsonview {
            font-family: Courier New;
            font-size: 12px;
        }

        .config-text {
            padding: 10px;
            overflow: auto;
            background-color: #3F3F3F;
            color: #eee;
            font-size: 12px;
            font-family: Courier New;
        }

        .config-format {
            position: absolute;
            right: 15px;
            bottom: 15px;
        }

        .config-text-lable {
            position: absolute;
            right: 5px;
            top: 5px;
            font-size: 13px;
            font-weight: bold;
            color: #D2CDCD;
            font-family: Courier New;
        }

        #jsonLable {
            background-color: #31BDEC;
            position: absolute;
            right: 12px;
            top: 1px;
            font-weight: bold;
            font-family: 黑体;
        }
    </style>
</head>

<body>
<% include("../../layout/loading.html"){} %>
<!-- 正文开始 -->
<div class="layui-fluid">
    <form class="layui-form model-form">
        <input name="id" type="hidden"/>
        <input name="type" type="hidden"/>
        <input name="appId" type="hidden" value="${appId}"/>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">配置名称</label>
                    <div class="layui-input-block">
                        <input name="title" placeholder="请输入配置名称" type="text" class="layui-input" maxlength="200"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">配置项</label>
                    <div class="layui-input-block">
                        <input name="confKey" placeholder="请输入配置项" type="text" class="layui-input" maxlength="200"
                               lay-verType="tips" lay-verify="required" required/>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">配置值</label>
            <div class="layui-input-block">
                <textarea name="confValue" id="confValue" class="layui-textarea config-text" rows="15" cols="10" lay-verType="tips" lay-verify="required" style="height: 210px"
                          placeholder="请输入配置值..."></textarea>
                <a href="javascript:;" class="layui-btn layui-btn-sm config-format" onclick="formatConfValue()">格式化</a>
                <span id="jsonLable">string</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入备注信息" name="remark" class="layui-textarea"></textarea>
            </div>
        </div>

        <!--<div class="layui-form-item">
            <label class="layui-form-label">预览</label>
            <div class="layui-input-block">
                <pre class="layui-code" id = "viewContent" style="padding-right: 55px">
                </pre>
                <span class="config-text-lable" id="jsonLable">string</span>
            </div>
        </div>-->

        <div class="layui-form-item text-right layui-footer" style="left: 0;">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="configSubmit" lay-submit>保存</button>
        </div>
    </form>
</div>

<!-- js部分 -->
<% include("../../common/js.html"){} %>
<script type="text/javascript" src="${ctxPath}/assets/libs/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/jsonview/jquery.jsonview.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/jsonview/jsbeautify.js"></script>
<script>
    layui.use(['layer', 'form', 'util', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;

        initJsonView();
        function initJsonView() {
            //配置预览
            if (isJSON($("#confValue").val())) {
                $("#viewContent").JSONView($("#confValue").val());
                $("#jsonLable").html("json")
            } else {
                $("#viewContent").html($("#confValue").val());
                $("#jsonLable").html("string")
            }
        }

        window.formatConfValue = function() {
            if (isJSON($("#confValue").val())) {
                $('#confValue').val(do_js_beautify($("#confValue").val()));
            } else {
                layer.msg("当前配置不是json格式", {icon: 5});
            }
        }

        function do_js_beautify(jsonStr) {
            if (jsonStr.length == 0)
                return jsonStr;
            var tabsize = 4; var tabchar = ' ';
            return js_beautify(jsonStr, tabsize, tabchar);
        }

        $('#confValue').bind('input propertychange','textarea',function(){
            initJsonView();
        });


        // 表单提交事件
        form.on('submit(configSubmit)', function (data) {
            layer.load(2);
            var url = '/system/config/save';
            data.field.confValue = document.getElementById("confValue").value;
            $.post(url, data.field, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg);
                    admin.closeThisDialog();
                    parent.layui.table.reload('configTable');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'json');
            return false;
        });
    });
</script>


</body>
</html>